<template>
  <template v-for="item in menuRoutes" :key="item.path">
    <template v-if="userInfo.authCodes.includes(item.meta.code)">
      <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path">
        <el-icon><icon-menu /></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-else>
        <template #title>
          <el-icon><location /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <Menu :menu-routes="item.children"></Menu>
        <!-- <el-menu-item
        v-for="childItem in item.children"
        :key="childItem.path"
        :index="childItem.path"
      >
        <el-icon><icon-menu /></el-icon>
        <span>{{ childItem.name }}</span>
      </el-menu-item> -->
      </el-sub-menu>
    </template>
  </template>
</template>

<script setup lang="ts">
import useUser from '@/stores/useUser'
import { toRefs } from 'vue'
const { menuRoutes } = defineProps(['menuRoutes'])
const { userInfo } = toRefs(useUser())
</script>

<style></style>
